// npm init -y
// npm i gulp -D 
// gulpfile.js 是gulp 的配置文件
// gulp要做的哪些事情都要写到gulp 的配置文件中
// gulp每做一个事情都需定义一个任务
let gulp = require('gulp')
// 定义一个gulp 任务--
//task  第一个参数 是任务名称- 第二个参数是任务要做的事情


// 获取处理sass的插件
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass',function(cb){
    //具体任务要做的事情
    //1-获取要处理的文件-- 
    gulp.src('./src/scss/**/*.scss')//获取对应路径下的所有的scss为后缀的文件
    //2- 调用 sass插件 去处理，
    // 文件流--》

    // ***装gulp 插件， 都是gulp-sass  
    // npm install sass gulp-sass --save-dev

    // .pipe(调用编译sass的插件)  把文件转为文件流，在管道中调用插件处理 
    .pipe(sass().on('error', sass.logError))
    //3-处理完的文件一般会放到一个专门的文件夹里面
    // 调用管道函数（调用gulp.dest 目标文件夹）
    .pipe(gulp.dest('./src/css'))
    .pipe(gulp.dest('./dist/css'))
    // 项目中 创建src 文件夹来保存 源代码（自己写的代码）
    //    dist（build）文件夹 编译后的文件
    console.log(1111);
    // 调用cb 表示任务已经完成了
    cb()
})


// 处理html文件 -- 压缩 放到dist文件夹
// npm install --save gulp-htmlmin
const htmlmin = require('gulp-htmlmin');


gulp.task('html',function(cb){

    gulp.src('./src/**/*.html')
    // .pipe(压缩html插件)
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('./dist'))

    cb()
})

// babel 工具    高版本js 转为 es5 
// babel  语法转化工具 ---》  具体每一个版本的js怎么转化 还得第一个工具 preset 
// gulp-balel

// npm install --save-dev gulp-babel @babel/core @babel/preset-env

const babel = require('gulp-babel');


// 压缩 混淆 js   --函数的形参名字--修改无意义的单词 --去调用多余空格和换行
var uglify = require('gulp-uglify');

 
gulp.task('js', (cb) =>
    {
        gulp.src('src/js/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        cb()
    }
);

// 合并js
// npm install --save-dev gulp-concat

var concat = require('gulp-concat');
gulp.task('concat', function() {
  return gulp.src('./src/js/login/*.js')
    .pipe(concat('login.js'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(gulp.dest('./src/js'));
});


// 类似 liveserver   支持实时刷新的服务器  --
// 监听文件的变化--sass  js  html --》刷新浏览器中页面

// npm install gulp-connect -D

const connect = require('gulp-connect')
// 刷新任务--刷新浏览器中html页面
gulp.task('reload',function(cb){
    gulp.src("./src/**/*.html").pipe(connect.reload())
    cb()
})

// 开发
gulp.task("dev",function(cb){
    // 创建服务器
    connect.server({
        livereload: true,
    });
    // 监听html 文件的变化--js  sass  
    gulp.watch('./src/scss/**/*.scss',gulp.series(['sass','reload']))
    gulp.watch('./src/js/**/*.js',gulp.series(['reload']))
    gulp.watch('./src/**/*.html',gulp.series(['reload']))

    cb()
})

// 编译 打包---源码中所有文件打包一遍放到 dist文件夹，dist文件夹下的内容，放到测试服务器上或者正式服务器
gulp.task("build", gulp.parallel(["js", "sass", "html"]), function () {
    console.log("项目的构件压缩完毕！");
  });



